<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        .red {
            background-color: red;
        }

        .green {
            background-color: green;
        }
    </style>

</head>

<body>
    <div id="app">
        <!-- <p>{{username}}</p> -->
        <!-- 属性上使用数据 -->
        <!-- <p v-bind:id="username">测试一下</p> -->

        <!-- v-cloak 
        v-cloak: 当页面中数据赋值前, 此时有 v-cloak 属性, 当页面数据赋值后, v-cloak 属性自动消失
        *作用：**解决浏览器在加载页面时因存在时间差而产生的`闪动`问题

         *原理：**先隐藏元素挂载位置，处理好渲染后再显示最终的结果
        一般配合style 使用
       -->
        <!-- <p>{{brotherWife}}</p> -->
        <!-- 
            v-text: 用于渲染文本内容, 等同于 {{}} , 但是不同于插值表达式, 没有闪现效果
         -->
        <!-- <p v-text="username"></p> -->
        <!-- <p v-text="link"></p> -->
        <!-- 
            v-html:
             将内容使用innerHTML 添加, 没有闪现效果,可以识别标签
             缺点: 由于可以解析数据中的html标签, 所以容易发生跨站脚本攻击 xss 
             // 解决方法: 可以通过正则表达式过滤掉用户的非法输入
         -->
        <!-- <p v-html="filter(link)"></p> -->

        <!-- v-once: 只渲染一次,数据更新不再渲染 -->
        <!-- <p v-once @click="littleBrother='高启岚'">{{littleBrother}}</p> -->

        <!-- v-pre: 绑定该指令的标签数据不会渲染 -->
        <!-- <p v-pre>v-pre:{{police}}</p> -->

        <!--
             v-bind:指令 主要用来绑定标签的动态属性
             简写语法:  v-bind:属性名 = '变量'  =>  :属性名= '变量'
             *作用：**动态地绑定一个或多个`attribute`【实现了可以允许我们在html内置的属性值中使用变量】

            *场景：复用某个数据的时候会使用。例如：飞猪官网

         -->
        <!-- <p v-bind:id="id">v-bind</p> -->
        <!-- <p><img v-bind:src="imgSrc" alt=""></p> -->
        <!-- <p :class="flag?'red':'green'" @click="flag=!flag">class属性</p> -->
        <!-- <p v-bind="propObj">v-bind 值为对象</p>
         -->


        <!--
             v-on: 该指令主要用于绑定事件
             语法: v-on:事件名= '事件执行函数' 简写 @事件名= '执行函数'
        
        -->

        <p>
            <button v-on:click="handleClick">点击事件</button>
            <button @click="handleClick">点击事件</button>
            <button @click="handleClick1">事件对象</button>
        </p>
        <ul>
            <li v-for="item in nameArr" @click="gotodetailFn($event,item.id)">{{item.name}}</li>
        </ul>
    </div>
</body>

</html>
<script>
    // vue 的内置指令
    // 语法: 就是一个自定义的属性,只不过属性以v-开头
    // 定义: 当数据不是在标签之间渲染, 而是在属性上渲染, 这时候不能使用插值表达式了
    // 而是使用内置或自定义的指令了
    const { createApp } = Vue;
    // setTimeout(() => {
    const vm = createApp({
        data() {
            return {
                username: '高启强',
                brotherWife: '陈书婷',
                link: '<a href="https://www.baidu.com">百度一下</a>',
                littleBrother: '高启盛',
                police: '安鑫',
                id: 100,
                imgSrc: 'https://img1.baidu.com/it/u=224084797,642910114&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1200',
                redColor: 'red',
                flag: false,
                propObj: {
                    id: 100,
                    abc: '呵呵'
                },
                nameArr: [
                    { id: 1, name: '九阳真经' },
                    { id: 2, name: '诛仙' },
                    { id: 3, name: '校园江湖' }
                ]
            }
        },
        methods: {
            filter(str) {
                var reg = /<\/?[^>]*>/g;
                str = str.replace(reg, '')
                return str
            },
            changeFlagFn() {
                this.flag = !this.flag
            },
            handleClick() {
                console.log('点击事件');
            },
            handleClick1(e) {
                // 事件对象: 该对象包含了整个事件的所有信息 
                console.log(e);
            },
            gotodetailFn(event) {
                console.log('id', id);
                console.log('event', event);
                //当传递参数的时候, $event 为当前vue 封装好的事件对象, 不需要进行兼容性处理(执行函数的传值)
            }

        }
    }).mount('#app')

    // }, 1000)

</script>